<template>
	<view class="">
		<view class="search2-top">
			<view class="search2-top-left" @click="backFn">
				<image class="search2-top-left-img" src="../../static/images/search1/back.png" mode=""></image>
			</view>
			<view class="search2-top-center">
				婚姻登记信息查询
			</view>
			<view class="search2-top-right">
				<!-- <image  src="../../static/images/marriage/Frame26@3x.png" mode=""></image> -->
				<image class="search2-top-right-img" src="../../static/images/marriage/Frame26@3x.png" mode=""></image>
			</view>
		</view>
		<view class="marriage">
			<image class="marriage-bg" src="../../static/images/marriage/Frame88@3x.png" mode="widthFix"></image>
			<image class="marriage-bg1" src="../../static/images/marriage/Group62@3x.png" mode=""></image>
			<view class="marriage-box">
				<image class="marriage-box-img" src="../../static/images/marriage/Group73@3x.png" mode=""></image>
				<view class="marriage-box-text">
					<view class="" v-for="item in textArr">
						{{item}}
					</view>
				</view>
				<view class="marriage-box-button" @click="queryFn">
					查询
				</view>
			</view>
			<image class="marriage-bg2" src="../../static/images/marriage/Group70@3x.png" mode=""></image>
		</view>
		<view class="mengbi" v-if="show">

		</view>
		<view class="notification" v-if="show">
			<view class="notification-top">
				人脸识别认证
			</view>
			<view class="notification-center">
				应国家法律法规要求，该业务需要核实您的身份
			</view>
			<view class="notification-bottom">
				<view class="notification-bottom-left" @click="quxiaoFn">
					取消
				</view>
				<view class="notification-bottom-right" @click="faceSwipingFn">
					立即刷脸
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import face from "@/uni_modules/mcc-face/index.js"
	import {
		getUserInfo,
		getMarryInfo
	} from '@/api/user'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'


	const show = ref(false)
	const backFn = () => {
		uni.navigateBack(-1)
	}
	const textArr = ['1.仅限于查询本人在山东省内婚姻登记机关办理的婚姻登记信息；', '2.暂不支持使用军人证件、护照等非居民身份证办理的登记信息查询;',
		'3.办理婚姻登记后，如您的姓名（或身份证号码）发生变更（15身份证号码升18位的情况除外），请到相关婚姻登记机关通过补领婚姻登记证的方式更正身份信息;',
		'4.当天办理的婚姻登记信息于次日8时后可查;',
		'5.如查询到的信息与实际情况不一致（如缺失、错误等），请咨询婚姻登记机关，我们将为您提供指导和服务。婚姻登记机关咨询服务电话详见省民政厅官方网站首页通知公告栏，或拨打当地T14电话查询。'
	]

	const queryFn = () => {
		show.value = true
	}

	// 取消
	const quxiaoFn = () => {
		show.value = false
	}

	const info = ref({})
	const getinfo = async () => {
		const data = await getUserInfo()
		info.value = data
	}
	onShow(() => {
		getinfo()
	})

	// 立即刷脸
	const faceSwipingFn = () => {
		face.open(['a', 'b', 'c', 'b', 'c'], function(e) {})
		show.value = false
		setTimeout(() => {
			face.close()
			//查询接口
			
			if(info.value.sex == '女'){
				getMarryInfo({number_w:info.value.card,number_m:''}).then(res=>{
					if (res.length==0) {
						uni.navigateTo({
							url: '/pages/marriageregistration/queryfailed'
						})
					} else {
						uni.navigateTo({
							url: '/pages/marriageregistration/querysuccessful'
						})
					}
				})
			}else{
				getMarryInfo({number_w:'',number_m:info.value.card}).then(res=>{
					if (res.length==0) {
						uni.navigateTo({
							url: '/pages/marriageregistration/queryfailed'
						})
					} else {
						uni.navigateTo({
							url: '/pages/marriageregistration/querysuccessful'
						})
					}
				})
			}

			
			

		}, 5000)


	}
</script>

<style lang="scss" scoped>
	.search2-top {
		height: 184rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		padding-top: 96rpx;
		display: flex;

		.search2-top-left {
			width: 10%;

			.search2-top-left-img {
				width: 88rpx;
				height: 88rpx;
			}
		}

		.search2-top-center {
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			width: 75%;
			padding-left: 38rpx;
			line-height: 88rpx;
		}

		.search2-top-right {
			width: 15%;
			display: flex;

			.search2-top-right-img {
				width: 80rpx;
				height: 80rpx;
			}

		}

	}

	.marriage {
		position: relative;

		.marriage-bg {
			width: 100%;
		}

		.marriage-bg1 {
			position: absolute;
			width: 193rpx;
			height: 200rpx;
			top: 64rpx;
			right: 76rpx;
		}

		.marriage-box {
			width: 90%;
			position: absolute;
			margin-left: 5%;
			top: 182rpx;
			padding: 44rpx 56rpx 74rpx 56rpx;
			box-shadow: 0rpx 8rpx 31rpx 0rpx rgba(0, 0, 0, 0.25);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			background-color: rgba(255, 255, 255, 0.6);
			height: 860rpx;

			.marriage-box-img {
				width: 160rpx;
				height: 48rpx;
			}

			.marriage-box-text {
				margin-top: 64rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 35rpx;
				
			}

			.marriage-box-button {
				width: 90%;
				margin-left: 5%;
				height: 84rpx;
				background: #1477FF;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				line-height: 84rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 84rpx;

			}
		}

		.marriage-bg2 {
			width: 100rpx;
			height: 209rpx;
			position: absolute;
			top: 76rpx;
			right: 78rpx;

		}
	}

	.notification {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 614rpx;
		// height: 282rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		z-index: 33;

		.notification-top {
			text-align: center;
			margin-top: 36rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #333333;

		}

		.notification-center {
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			padding: 0 30rpx;
			color: #333333;
			margin-top: 22rpx;
			margin-bottom: 34rpx;

		}

		.notification-bottom {
			display: flex;
			justify-content: space-evenly;
			text-align: center;
			align-items: center;
			border-top: 1rpx solid #EEEEEE;
			height: 126rpx;

			.notification-bottom-left {
				width: 40%;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 35rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #333;
				background-color: #efefef;

			}

			.notification-bottom-right {
				width: 40%;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 35rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #fff;
				background-color: #5377e7;

			}
		}
	}

	.mengbi {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.4);
	}
</style>